@mixin font-face($name) {
  @font-face {
    font-family: $name;
    src: url("~src/fonts/#{$name}.woff2") format("woff2"),
      url("~src/fonts/#{$name}.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }
}

@include font-face("SourceSansPro-Bold");
@include font-face("SourceSansPro-Regular");
@include font-face("SourceSansPro-SemiBold");
@include font-face("SFMono-Semibold");
@include font-face("RobotoMono-Medium");
@include font-face("RobotoMono-Regular");
@include font-face("Lato-Regular");

$font-family--base: SourceSansPro-Regular;
$font-family--bold: SourceSansPro-Bold;
$font-family--semi-bold: SourceSansPro-SemiBold;
$font-family--monospace: RobotoMono-Medium;
$font-family--mono-regular: RobotoMono-Regular;
$font-family--sf-mono: SFMono-Semibold;
$font-family--lato-regular: Lato-Regular;

$font-weight--extra-bold: 900;
$font-weight--bold: 600;
$font-weight--medium: 500;
$font-weight--light: 400;

$font-size--xx-large: 28px;
$font-size--x-large: 24px;
$font-size--large: 20px;
$font-size--tall: 16px;
$font-size--medium: 14px;
$font-size--small: 12px;

$line-height--xxx-large: 70px;
$line-height--xx-large: 64px;
$line-height--x-large: 48px;
$line-height--larger: 40px;
$line-height--large: 32px;
$line-height--medium: 24px;
$line-height--medium-small: 22px;
$line-height--small: 20px;
$line-height--x-small: 16px;
$line-height--xx-small: 14px;

$letter-spacing--medium: 0.02em;
$letter-spacing--compact: 0.01em;

$spacing-base: 8px;
$spacing-xx-small: 4px;
$spacing-x-small: 8px;
$spacing-smaller: 12px;
$spacing-small: 16px;
$spacing-medium-small: 20px;
$spacing-medium: 24px;
$spacing-mid-large: 28px;
$spacing-large: 32px;
$spacing-x-large: 40px;
$spacing-xx-large: 48px;

@mixin text--heading-1 {
  font-family: $font-family--base;
  font-size: $font-size--xx-large;
  line-height: $line-height--xx-large;
  font-weight: $font-weight--light;
}

@mixin text--heading-2 {
  font-family: $font-family--base;
  font-size: $font-size--x-large;
  line-height: $line-height--x-large;
  font-weight: $font-weight--bold;
}

@mixin text--heading-3 {
  font-family: $font-family--base;
  font-size: $font-size--large;
  line-height: $line-height--large;
  font-weight: $font-weight--medium;
  margin-bottom: 0;
}

@mixin text--heading-5 {
  font-family: $font-family--base;
  font-size: $font-size--tall;
  line-height: $line-height--medium;
  font-weight: $font-weight--bold;
}

@mixin text--heading-6 {
  font-family: $font-family--base;
  font-size: $font-size--small;
  line-height: $line-height--x-small;
  font-weight: $font-weight--medium;
  text-transform: uppercase;
}

@mixin text--heading-7 {
  font-family: $font-family--semi-bold;
  font-size: $font-size--x-large;
  line-height: $line-height--x-large;
  font-weight: $font-weight--bold;
}

@mixin text--body {
  font-family: $font-family--base;
  font-size: $font-size--medium;
  line-height: $line-height--medium;
  font-weight: $font-weight--light;
}

@mixin text--caption {
  font-family: $font-family--base;
  font-size: $font-size--small;
  line-height: $line-height--small;
  font-weight: $font-weight--light;
  letter-spacing: $letter-spacing--medium;
}

@mixin text--body-strong {
  font-family: $font-family--semi-bold;
  font-size: $font-size--medium;
  line-height: $line-height--medium;
}

@mixin text--code {
  font-family: $font-family--monospace;
  font-size: $font-size--medium;
  line-height: $line-height--medium;
  font-weight: $font-weight--medium;
}

@mixin text--code--bold {
  font-family: $font-family--monospace;
  font-size: $font-size--small;
  line-height: $line-height--medium;
  font-weight: $font-weight--bold;
}

//
//    Text Truncation
//

// text-overflow - limits a line of text to a single line. If text overflows
// the container will be truncated with an ellipsis
@mixin text-overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// line-clamp - limits text in a container to a number of lines. If text
// overflows container past number of lines, text will be truncated with an
// ellipsis. This mixin takes a single parameter that is the number of line
// to limit text to (default is 2)
@mixin line-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
